<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1 {
        font-size: 36px;
        color: #d7567f;
        text-align: center;
      }
      .tableStyle {
        min-width: 400px;
        margin: 15px auto;
        border: 0;
      }
      .tableStyle th {
        background-color: #d7567f;
        color: #ffffff;
      }
      .tableStyle,
      .tableStyle th,
      .tableStyle td {
        font-size: 0.95em;
        text-align: center;
        padding: 4px;
        border-collapse: collapse;
      }
      .tableStyle th,
      .tableStyle td {
        border: 1px solid #e89eb5;
        border-width: 1px 0 1px 0;
      }
      .tableStyle tr {
        border: 1px solid #e89eb5;
      }
      .tableStyle tr:nth-child(odd) {
        background-color: #f1c6d4;
      }
      .tableStyle tr:nth-child(even) {
        background-color: #fdfdfd;
      }
      .btn {
        margin: 10px auto;
        text-align: center;
      }
      .btn button {
        height: 25px;
        line-height: 25px;
        width: 100px;
        background-color: #d7567f;
        color: #ffffff;
        border: 0;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <h1>成绩表</h1>
    <table class="tableStyle">
      <tr>
        <th>姓名</th>
        <th>C语言</th>
        <th>前端开发</th>
      </tr>
      <tr>
        <td>张美丽</td>
        <td>85</td>
        <td>90</td>
      </tr>
      <tr>
        <td>李婷</td>
        <td>88</td>
        <td>90</td>
      </tr>
      <tr>
        <td>钟智民</td>
        <td>83</td>
        <td>86</td>
      </tr>
      <tr>
        <td>虎小</td>
        <td>90</td>
        <td>93</td>
      </tr>
    </table>
    <div class="btn">
      <button id="addRow">添加一行</button>
      <button id="delRow">删除最后一行</button>
    </div>
    <script>
      document.querySelector("#addRow").onclick = function () {
        // 获取表格对象
        var table = document.querySelector(".tableStyle");
        // 使用表格对象的添加行方法插入新行
        var newRow = table.insertRow(-1);
        // 插入三个新单元格
        var newTd1 = newRow.insertCell(0);
        var newTd2 = newRow.insertCell(1);
        var newTd3 = newRow.insertCell(2);
        // 分别设置单元格内容
        newTd1.innerHTML = "王安";
        newTd2.innerHTML = "85";
        newTd3.innerHTML = "87";
      };
      document.querySelector("#delRow").onclick = function () {
        // 获取表格对象
        var table = document.querySelector(".tableStyle");
        // 获取最后一行对应的索引值
        var index = table.rows.length - 1;
        // 使用表格对象的删除行方法实现删除操作
        table.deleteRow(index);
      };
    </script>
  </body>
</html>
